<template>
  <div style="background:#f4f4f4;">
    <van-dropdown-menu>
      <van-dropdown-item @change="switchArr" get-container="body" v-model="value1" :options="option1" />
      <van-dropdown-item title="筛选" ref="item">
        <van-cell center title="包邮">
          <template #right-icon>
            <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
          </template>
        </van-cell>
        <van-cell center title="团购">
          <template #right-icon>
            <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
          </template>
        </van-cell>
        <div style="padding: 5px 16px;">
          <van-button type="danger" block round @click="onConfirm">
            确认
          </van-button>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <ul>
        <StoreTjLike v-for="v in LkArr" :key="v.dealid" :v="v"></StoreTjLike>
      </ul>
    </van-pull-refresh>
  </div>
</template>

<script>
import StoreTjLike from './store-tj-like.vue';
import { Toast } from 'vant';
export default {
  props: ['LkArr', 'type'],
  components: {
    StoreTjLike,
  },
  data() {
    return {
      value1: 1,
      isLoading: false,
      switch1: false,
      switch2: false,
      option1: [
        { text: '销量排序', value: 0 },
        { text: '最新上架', value: 1 },
        { text: '价格由低到高', value: 2 },
        { text: '价格由高到低', value: 3 },
      ],
    };
  },
  methods: {
    onConfirm() {
      this.$refs.item.toggle();
    },
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
      }, 1000);
    },
    switchArr() {
      switch (this.value1) {
        case 0: //销量排序
          this.$store.commit('sale', this.type);
          break;
        case 1:
          this.$store.dispatch(this.type);
          break;
        case 2: // 低到高
          this.$store.commit('lowHigh', this.type);
          break;
        case 3: // 高到低
          this.$store.commit('highLow', this.type);
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
ul {
  padding: 0.3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>
